<template>
    <div class="ve_container">
        <div
            id="client_port_per_day_flow"
            style="width: 100%; height: 600px"
        ></div>
    </div>
</template>
<script>
import cloudNetworkReportMenu from "@/views/pages/cloud_network_report/CloudNetworkReportMenu";

export default {
    data: () => ({
        description: "网络渗透近七天访问流量",
        // type 0:目录 1：菜单 2：按钮
        type: "1",
        icon: "DataLine",
        name: "网络渗透近七天访问流量",
        parentMenu: cloudNetworkReportMenu,
    }),
};
</script>

<script setup>
import { onMounted } from "vue";

import * as echarts from "echarts";

onMounted(async () => {
    const { code, data } = await VE_API.cloudNetworkReport.findClient7DayFlow();
    if (code === 0) {
        console.log(data);
    }
    if (!data) {
        return;
    }
    const dom = document.getElementById("client_port_per_day_flow");
    const myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
    });
    // const app = {};

    let option;

    const seriesList = [];

    for (let clientInFlow of data.clientInFlowList) {
        seriesList.push({
            type: "bar",
            name:
                "进口流量" +
                clientInFlow.clientId +
                ":" +
                clientInFlow.visitorPort,
            stack: "in_flow_" + clientInFlow.clientId,
            emphasis: {
                focus: "series",
            },
            data: clientInFlow.flowList,
        });
    }
    for (let clientOutFlow of data.clientOutFlowList) {
        seriesList.push({
            type: "bar",
            name:
                "出口流量" +
                clientOutFlow.clientId +
                ":" +
                clientOutFlow.visitorPort,
            stack: "out_flow_" + clientOutFlow.clientId,
            emphasis: {
                focus: "series",
            },
            data: clientOutFlow.flowList,
        });
    }

    console.log(seriesList);
    option = {
        tooltip: {
            trigger: "axis",
            // axisPointer: {
            //   type: 'shadow'
            // }
        },
        legend: {},
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        xAxis: [
            {
                type: "category",
                data: data.dayList,
            },
        ],
        yAxis: [
            {
                type: "value",
            },
        ],
        series: seriesList,
        series1: [
            {
                name: "Direct",
                type: "bar",
                emphasis: {
                    focus: "series",
                },
                data: [320, 332, 301, 334, 390, 330, 320],
            },
            {
                name: "Email",
                type: "bar",
                stack: "Ad",
                emphasis: {
                    focus: "series",
                },
                data: [120, 132, 101, 134, 90, 230, 210],
            },
            {
                name: "Union Ads",
                type: "bar",
                stack: "Ad",
                emphasis: {
                    focus: "series",
                },
                data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
                name: "Video Ads",
                type: "bar",
                stack: "Ad",
                emphasis: {
                    focus: "series",
                },
                data: [150, 232, 201, 154, 190, 330, 410],
            },
            {
                name: "Search Engine",
                type: "bar",
                data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                emphasis: {
                    focus: "series",
                },
                markLine: {
                    lineStyle: {
                        type: "dashed",
                    },
                    data: [[{ type: "min" }, { type: "max" }]],
                },
            },
            {
                name: "Baidu",
                type: "bar",
                barWidth: 5,
                stack: "Search Engine",
                emphasis: {
                    focus: "series",
                },
                data: [620, 732, 701, 734, 1090, 1130, 1120],
            },
            {
                name: "Google",
                type: "bar",
                stack: "Search Engine",
                emphasis: {
                    focus: "series",
                },
                data: [120, 132, 101, 134, 290, 230, 220],
            },
            {
                name: "Bing",
                type: "bar",
                stack: "Search Engine",
                emphasis: {
                    focus: "series",
                },
                data: [60, 72, 71, 74, 190, 130, 110],
            },
            {
                name: "Others",
                type: "bar",
                stack: "Search Engine",
                emphasis: {
                    focus: "series",
                },
                data: [62, 82, 91, 84, 109, 110, 120],
            },
        ],
    };

    if (option && typeof option === "object") {
        myChart.setOption(option);
    }

    window.addEventListener("resize", myChart.resize);
});
</script>

<style lang="scss" scoped></style>
